<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单数据收集</title>
</head>

<body>
    <div id="root">
        <form>
            <label for="name">账号:</label>
            <input type="text" id="userName" v-model.trim="userData.userName" name="userName"><br><br>

            <label for="password">密码:</label>
            <input type="password" v-model="userData.password" id="password" name="password"><br><br>

            <label for="gender">性别:</label>
            男<input type="radio" v-model="userData.gender" id="male" name="gender" value="male">
            女<input type="radio" v-model="userData.gender" id="female" name="gender" value="female"><br><br>

            <label for="hobbies">爱好:</label>
            运动<input type="checkbox" v-model="userData.hobbies" id="sport" name="hobbies" value="sport">
            阅读<input type="checkbox" v-model="userData.hobbies" id="read" name="hobbies" value="read">
            音乐<input type="checkbox" v-model="userData.hobbies" id="music" name="hobbies" value="music"><br><br>


            <label for="email">邮箱:</label>
            <input type="email" v-model="userData.email" id="email" name="email"><br><br>

            <label for="school">学校</label>
            <select v-model="userData.school" name="school" id="school">
                <option value="school1">学校1</option>
                <option value="school2">学校2</option>
                <option value="school3">学校3</option>
            </select><br><br>


            <label for="remark">说明：</label>
            <textarea v-model="userData.remark" name="remark" id="remark" cols="30" rows="10"></textarea><br><br>

            <input type="submit" @click="submitForm" value="提交">
        </form>
    </div>

</body>

<script src="../script/vue.js"></script>

<script>
    const app = new Vue({
        el: '#root',
        data: {
            userData: {
                userName: '',
                password: '',
                gender: '',
                hobbies: [],
                email: '',
                school: '',
                remark: ''
            }
        },
        methods: {
            submitForm(event) {
                // 阻止表单的默认提交行为
                event.preventDefault(); 
                // 在这里可以添加表单提交的逻辑，例如发送数据到服务器
                console.log('Form submitted:', this.userData);
                console.log(JSON.stringify(this.userData));
            }
        }
    })
</script>

</html>